<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8">
		</script>
		<style type="text/css">
			/* 设置路由的高亮显示 */
			.router-link-active,
			.mystyle {
				font-size: 2.5rem;
				color: hotpink;
				background-color: #007BFF;
				font-family: "microsoft yahei";
			}

			.v-enter,
			.v-leave-to {
				transform: translateX(150px);
				opacity: 0;
			}

			.v-enter-active,
			.v-leave-active {
				transition: all 0.5s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 第一种方式 配置路由 -->
			<!-- <a href="#/login" style="text-decoration: none;color: hotpink;">登录</a>
			<a href="#/rigester" style="text-decoration: none; color: hotpink;">注册</a> -->
			<router-link to="/login" tag="span">登录</router-link>
			<router-link to="/rigester">注册</router-link>
			<transition mode="out-in">
				<router-view></router-view>
			</transition>

		</div>
		<script>
			var login = {
				template: '<h1 style="color:hotpink;">登录</h1>'
			}
			var rigester = {
				template: '<h1 style="color:hotpink;">注册</h1>'
			}
			//如果导入了src 他会在vm对象中 创建vueRouter对象的构造函数
			var vueRouter = new VueRouter({
				routes: [
					/* {
										path: '/',
										component: login
									} 这样也可以默认显示登录界面  不推荐*/
					{
						path: '/',
						redirect: '/login',
						//两种区别 第一种显示登录页面 页面一开始进入的时候只有 /  第二种显示登录页面 就有 #/login
					}, {
						path: '/login',
						component: login
					}, {
						path: '/rigester',
						component: rigester
					}
				],
				linkActiveClass: 'mystyle', //这里可以修改 class的属性名 高亮显示的
			})
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router: vueRouter,
			})
			console.log(vm)
		</script>
	</body>
</html>
